<!--comment  -->
<template>
  <div class="comment">
    <div class="search_cpm">
      <page-search :search-form-config="searchFormConfig" @searchBtnClick="handleSearch" @resetBtnClick="handleReset"
        ref='mySearchRef'>
      </page-search>
    </div>
    <div class="table_cpm">
      <page-table ref="myTableRef" pageName="comment" :table-config="tableConfig" @createOrEdit="handleCreateOrEdit">
        <template #userDetail="{ row }">
          {{ row.userDetail.username }}
        </template>
        <template #articleDetail="{ row }">
          {{ row.articleDetail.title }}
        </template>
        <template #replies="{ row }">
          <div v-if="!isEmptyArr(row.replies)">
                <ol v-for="reply in row.replies" :key="reply.id">
              <li>
                {{ reply.content }}
              </li>
            </ol>
          </div>


        </template>
      </page-table>
    </div>
    <div class="modal_cpm">
      <page-modal :modal-form-config="modalFormConfigRef" :default-info='defaultInfo' page-name="comment"
        ref='pageModalRef'></page-modal>
    </div>


  </div>
</template>
<script setup lang='ts' >
import { computed } from "vue"
import { searchFormConfig } from "./config/search.config"
import { tableConfig } from "./config/table.config"
import { modalFormConfig } from "./config/modal.config"
import { usePageSearch, usePageModal } from "@/hooks"

import { useStore } from "@/store"
const store = useStore()
let [handleSearch, handleReset, myTableRef, mySearchRef] = usePageSearch()

const modalFormConfigRef = computed(() => modalFormConfig)
const callbackEdit = () => {
  pageModalRef.value.dialogTitle = '修改评论'
}
const callbackCreated = () => {
  pageModalRef.value.dialogTitle = '添加评论'
}
let [handleCreateOrEdit, defaultInfo, pageModalRef] = usePageModal(callbackEdit, callbackCreated)

const isEmptyArr = (arr) => JSON.stringify(arr) === '{}'


</script>
<style lang='less' scoped>
.table_cpm {
  margin-top: 15px;
}

.avatar {
  width: 65px;
  height: 65px;
  border-radius: 50%;
}

.tag {
  margin: 2px;
}
</style>
